@use "@/styles/usenamespace.scss" as ns;
@use "@/styles/mixin.scss" as mixin;
@use "@/styles/function.scss" as fun;
@use "@/styles/variable.module.scss" as variable;

@include ns.b(load-page) using ($b) {
  @keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  position: fixed;
  @include mixin.locate();
  background: fun.getCssVarValue($b, background);
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  animation: fade-out fun.getCssVarValue($b, transitionDuration) linear;
  animation-play-state: paused;
  z-index: variable.$zIndex;

  @include ns.e(bottom) using ($e) {
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    @include ns.b($b) using ($b) {
      @include ns.e(progress) using ($e) {
        #{fun.getCssVarName($e, transition)}: #{fun.getCssVarValue($b, progressTransitionDuration)} linear;
      }
      @include ns.e(copyright) using ($e) {
        margin-top: 32rpx;
        font-size: 24rpx;
        line-height: 32rpx;
        white-space: pre;
        text-align: center;
      }
    }
  }

  @include ns.s(transition) using ($s) {
    animation-play-state: running;
  }
}
